<template>
  <div class="app-container">
    <div style="padding-right: 100px">
      <el-form :model="data" v-bind="formProps">
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否通用">
              <span slot="label">
                <span class="text-red">*</span>
                <span>是否通用</span>
              </span>
              <el-select v-model="data.is_common" clearable filterable style="width: 100%" @change="commonChange"
                :disabled="!!data.id">
                <el-option label="否" :value="0"> </el-option>
                <el-option label="是" :value="1"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="档案类型">
              <span slot="label">
                <span class="text-red">*</span>
                <span>档案类型</span>
              </span>
              <el-select v-model="data.document_type" clearable filterable style="width: 100%" :disabled="!!data.id">
                <el-option v-for="o in typeOptions" :key="o.value" :label="o.label" :value="o.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签名称">
              <span slot="label">
                <span class="text-red">*</span>
                <span>标签名称</span>
              </span>
              <el-input v-model="data.name" clearable style="width: 100%"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签类型">
              <span slot="label">
                <span class="text-red">*</span>
                <span>标签类型</span>
              </span>
              <el-select v-model="data.label_type" clearable filterable style="width: 100%" @change="labelTypeChange">
                <el-option v-for="o in labelTypeOptions" :key="o.value" :label="o.label" :value="o.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- v-if="data.label_type==3 && data.is_common==0" -->
          <el-col :span="12">
            <el-form-item label="标签层级" v-if="data.label_type==3 && data.is_common==0">
              <el-select v-model="data.level" clearable filterable style="width: 100%">
                <el-option v-for="o in levelOptions" :key="o.value" :label="o.label" :value="o.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="data.remarks" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="text-right">
        <el-button v-if="!formProps.disabled" type="primary" @click.native="submit(false)" :loading="submitLoading">
          确认
        </el-button>
        <el-button v-if="!formProps.disabled" type="warning" @click.native="submit(true)" :loading="submitLoading">
          确认并下一步
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import { getToken } from '@/utils/auth'

export default {
  mixins: [commonMixin],
  props: {
    laberDesignId: {
      typeof: String,
      default: '',
    },
    isCommon: {
      typeof: Number,
      default: 0,
    },
  },
  data() {
    return {
      api: this.$api.label,
      apiSingle: this.$api.label + 'getbyid',
      baseUrl: this.$api.baseUrl,
      apiCreate: this.$api.label + 'modify',
      apiEdit: this.$api.label + 'modify',
      formProps: {
        dialogWidth: '80%',
        labelWidth: '120px',
      },

      typeOptions: [
        { label: '在线设计', value: 1 },
        { label: 'CodeSoft', value: 2 },
        { label: 'Bartender', value: 3 },
      ],
      labelTypeOptions: [],
      levelOptions: [],
      initData: { labels: [], name: '', document_type: '', is_common: 0, id: null },
      data: {},
      labelUploaderProps: {},
      dicObj: {},
      levelObj: {},
      formData: new FormData(),
    }
  },
  created() {
    this.getTabInit()
  },
  watch: {
    laberDesignId: {
      handler(v, o) {
        if (!!v && v !== o) {
          this.getInfo()
        } else {
          this.data = _.cloneDeep(this.initData)
        }
      },
      immediate: true,
    },
  },
  methods: {
    getTabInit() {
      this.$request(this.$api.dictionary + 'getdirectchildren', {
        parentType: 'barcode_label_type',
      }).then((r) => {
        this.labelTypeOptions = r.map((i) => {
          return {
            value: 1 * i.value,
            label: i.label,
          }
        })
        r.forEach((v) => {
          this.dicObj[v.value] = v.label
        })
      })
      this.$request(this.$api.dictionary + 'getdirectchildren', {
        parentType: 'package_level_name',
      }).then((r) => {
        r.forEach((v) => {
          this.levelObj[v.value] = v.label
        })
        this.levelOptions = r
      })
    },
    getInfo() {
      this.pageLoading = true
      let url = this.apiSingle
      this.$request(url, {
        id: this.laberDesignId,
      })
        .then((r) => {
          this.data = this.formatAfterGet(r)
          this.$emit('update:isCommon', r.is_common)
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    commonChange() {
      if (this.data.is_common == 1) {
        this.data.document_type = ''
        this.data.level = ''
      }
    },
    labelTypeChange() {
      if (this.data.label_type != 3) this.data.level == null
    },
    submit(flag) {
      this.submitLoading = true
      let url = this.apiEdit
      if (!this.data.document_type) {
        this.submitLoading = false
        return this.$message.error('档案类型必填')
      }
      if (this.data.is_common == 0 && !this.data.label_type) {
        this.submitLoading = false
        return this.$message.error('标签类型必填')
      }
      if (this.data.document_type == 1 && !this.data.name) {
        this.submitLoading = false
        return this.$message.error('标签名称为必填项')
      }
      this.$emit('update:isCommon', this.data.is_common)
      // this.formData.append('model', JSON.stringify(this.data))
      this.$request(url, this.data, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.editFormVisible = false
          if (!this.data.id) {
            this.$emit('update:laberDesignId', r)
          }
          if (!this.data.id && this.data.type == 1 && r) {
            labelDesign(r)
          }
          if (flag) {
            this.$emit('update:currentTab', 'tab2')
          }
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    labelDesign(id) {
      if (this.editFormVisible) this.editFormVisible = false
      this.designUrl = `${this.designBaseUrl}?id=${id}&api=${this.$api.label}`
      this.designVisible = true
    },
  },
}
</script>

<style lang="scss">
</style>